<script setup>
import router from '@/router';
import IconBack from '@/components/icons/IconBack.vue';
import IconShare from '@/components/icons/IconShare.vue';
import IconRiging from '@/components/icons/IconRiging.vue';
import Nodata from '@/components/comment/Nodata.vue';
import { getApi, requestAxios } from '@/api/Api';
import { ref, computed, onMounted, watch } from 'vue';


// 入参
const { courseId } = defineProps({ courseId: Number })
// 网络请求数据
const activeIndex = ref(0)
const courseDescriptionHtml = ref('')
const courseInfo = ref({
  teachers: [],
  coupons: ["限时7折", "￥300满减"]
});
const lessons = ref([])

function processingLessons(origindata) {
  console.log("origindata", origindata);
  if (origindata) {
    origindata.forEach(element => {
      console.log("element", element);
      if (element.type === "chapter" && element.children.length > 0) {
        lessons.value = lessons.value.concat(element.children);
      }
    });
    console.log("过滤课时后", lessons.value);
  } else {
    console.log("没有课时");
  }
}
// 临时变量
var isTop = ref(false)

// 网络请求 ==================================
// 课程详情
function fetchCourseDetail() {
  console.log("fetchCourseDetail...");
  getApi(`v2-course/v2/course/${courseId}/for-user`).then(res => {

    courseInfo.value = res;
    if (res.aboutLink) {
      loadHtml(res.aboutLink);
    }
  }).catch(err => {
    console.log(err);
  })
}
// 课程简介
function loadHtml(url) {
  console.log("loadHtml")
  const params = {
    headers: {
      'Content-Type': 'text/html'
    }
  }
  requestAxios.get(url, params)
    .then(res => {
      console.log("loadHtml success")
      courseDescriptionHtml.value = res;
    })
    .catch(err => {
      console.error("loadHtml fail");
    })
}

// 获取课时列表

function loadLesson(courseId) {
  // https://api.btclass.net/v2-course/v2/courses/2870/items
  // https://api.btclass.net/v2-course/v2/courses/2870/items
  getApi(`v2-course/v2/courses/${courseId}/items`).then(res => {
    console.log("loadLesson success", res);
    processingLessons(res);
  }).catch(err => {
    console.log(err);
  })
}


onMounted(() => {
  console.log("onMounted...");
  fetchCourseDetail();
  loadLesson(courseId);
})

function onClickLeft() {
  console.log("点击了返回");
  router.go(-1);
}

function tabChange(index) {
  console.log("tabChange", index);
}

watch(activeIndex, (newValue, oldValue) => {
  console.log("activeIndex change", newValue);
})

function scrollHandle(event) {
  isTop.value = event.target.scrollTop > 170
  // console.log(isTop.value, event.target.scrollTop)
}

function remToPx(rem) {
  // 获取根元素的字体大小
  let fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
  // 返回 rem 乘以字体大小的结果
  return rem * fontSize;
}

//将秒格式化成分钟
function formatMinutes(length) {
  return length > 0 ? `${Math.floor(length / 60)}` + '分钟' : "";
}



</script>

<template>
  <!-- 透明导航栏没标题-->
  <div class="flex fixed h-10 px-4 top-6 w-full items-center justify-between z-30" v-show="!isTop">
    <icon-back class="w-6 h-6 bg-black/50 rounded-full p-1 stroke-white stroke-2" @click="onClickLeft"></icon-back>
    <!-- <div class="flex-1 text-base text-black font-bold text-center mx-4 van-ellipsis"> {{ courseTitle }}</div> -->
    <IconShare class="w-6 h-6 bg-black/50 rounded-full p-1 stroke-white stroke-2"></IconShare>
  </div>

  <!-- 白色导航栏-->
  <div class="flex fixed h-10 px-4 top-6 w-full items-center z-40 bg-white" v-show="isTop">
    <icon-back class="w-6 h-6    p-1 stroke-black stroke-2" @click="onClickLeft"></icon-back>
    <div class="flex-1 text-base text-black font-bold text-center mx-4 van-ellipsis"> {{ courseInfo?.title || "loading" }}
    </div>
    <IconShare class="w-6 h-6    p-1 stroke-black stroke-2" @click="onClickLeft"></IconShare>
  </div>
  <!-- 课程封面 -->
  <div class=" w-full fixed h-[196px] top-6 z-10 bg-pink-400">
    <img :src="courseInfo.largePicture" alt="" srcset="">
  </div>
  <!-- 滚动视图 -->
  <div class="scrollview h-full mt-16 pt-[160px] pb-[50px] w-full transparent z-20 overflow-y-scroll fixed" @scroll='scrollHandle'>
    <div class="container ">
      <!-- 课程信息 -->
      <div class="courseInfo rounded-t-xl pb-4 pt-6 bg-white">
        <!-- 优惠券 -->
        <div class="flex mx-6 justify-between items-center">
          <!-- 折扣 -->
          <div class="flex">
            <div class="rounded-sm border border-sky-950 flex">
              <div class="text-xs text-white rounded-br-md bg-sky-950 h-full p-[2px]">魔</div>
              <div class="text-xs text-sky-950 mx-1 p-[2px]">折上9折</div>
            </div>
            <div class="coupons-content text-xs text-red-500 px-1 pt-[3px] rounded-sm ml-2 "
              v-for="(item, index) in courseInfo.coupons" :key="index">{{ item }}</div>
          </div>
          <!-- 领券 -->
          <div class="flex coupons-button rounded-full pl-2 pr-1 py-1">
            <div class="text-xs font-bold text-white">领券</div>
            <div class="w-4 h-4">
              <IconRiging class="stroke-white w-4 h-4" />
            </div>
          </div>
        </div>
        <!-- 标题 -->
        <div class="text-lg text-black font-blod px-6 mt-4 leading-5">{{ courseInfo.title }}</div>
        <div class="text-gray-500	text-xs px-6 mt-2">财经考证，就选BT教育！</div>
        <!-- 人数与时间 -->
        <div class="flex justify-between px-6 mt-1">
          <div class="text-gray-500	text-[11px] ">课程有效期 2024年01月30日</div>
          <div class="text-gray-500	text-[11px] ">99个人在学</div>
        </div>
      </div>
      <!-- 分割线 -->
      <div class="h-4 w-full bg-slate-100"> </div>
      <!-- 主讲老师 -->
      <div class="teacher bg-white py-4">

        <div class="ml-6 flex items-center text-black">
          主讲老师 {{ courseInfo?.teachers?.length }}
          <IconRiging class="stroke-black w-4 h-4" />
        </div>
        <!-- 老师卡片 -->
        <div class="flex px-6 mt-2">
          <div class="teacher-card rounded-md shadow-md shadow-gray-500/50 w-40 flex h-14 items-center mr-4"
            v-for="(item, index) in courseInfo?.teachers" :key="index">
            <div class=" mx-1">
              <img :src="item.mediumAvatar" alt="" srcset="" class="w-10 rounded-full">
            </div>
            <div class="mx-2">
              <div class="text-black text-sm">{{ item.name }}</div>
              <div class="text-gray-500 text-[9px]">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分割线 -->
      <div class="h-4 w-full bg-slate-100"> </div>
      <!-- 简介 - 课时 - 资料 -->
      <div class="w-full bg-white mb-16">
        <van-tabs v-model:active="activeIndex" swipeable @change="tabChange">
          <van-tab title="简介">
            <div v-html="courseDescriptionHtml"></div>
          </van-tab>
          <van-tab title="课时">
            <div class="lesson-container" v-if="lessons.length > 0">
              <van-cell v-for="(item, index) in lessons" :key="index">
                <template #icon>
                  <van-tag round type="primary" class="px-1">{{ index + 1 }}</van-tag>
                </template>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <p class="text-sm ml-2 text-slate-800">{{ item.entity.title }}</p>
                  <div class="text-gray-400 text-xs ml-2 mt-2">{{ formatMinutes(item.entity.length) }}</div>
                </template>
                <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                <template #value>
                  <p class="text-base text-sky-400">{{ item.entity.free === 1 ? '免费' : '' }}</p>
                </template>
              </van-cell>
            </div>
            <van-empty description="暂无课时" v-else />
          </van-tab>
          <van-tab title="资料">
            <!-- <div class="flex flex-col mt-40 items-center">
              <Nodata class="h-auto w-40 text-center text-gray-400 text-2xl"> 暂无课时</Nodata>
            </div> -->
            <van-empty description="暂无资料" />
          </van-tab>
        </van-tabs>
      </div>


    </div>
  </div>
  <van-action-bar class="fixed bottom-0 w-full bg-white z-40">
    <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
    <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
    <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
    <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
  </van-action-bar>
  <!-- <van-nav-bar :title="课程详情" left-text="返回" left-arrow @click-left="onClickLeft" class="mt-4">
  </van-nav-bar> -->
</template>



<style scoped>
.coupons {
  background: rgb(242, 106, 136);
  background: linear-gradient(162deg, rgba(242, 106, 136, 0.49763655462184875) 0%, rgba(237, 148, 168, 1) 34%, rgba(237, 148, 168, 0.028448879551820738) 100%);
}

.coupons-button {
  /* background: rgb(235, 30, 30); */
  background: linear-gradient(83deg, rgba(235, 30, 30, 1) 0%, rgba(247, 124, 9, 1) 100%);
}

.teacher-card {
  /* background: rgb(200, 172, 255); */
  background: linear-gradient(180deg, rgba(200, 172, 255, 0.4822303921568627) 0%, rgba(219, 200, 255, 0.5410539215686274) 4%, rgba(255, 255, 255, 1) 100%);
}

.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}

.van-tag {
  padding: 2px 8px;
}

.van-cell {
  align-items: flex-start;
}

/deep/.van-cell__title {
  flex: 2 !important;
  ;
}

/deep/.van-cell__value {
  flex: none !important;
}
</style>